<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="/Modelos/Principal/modelo-principal.xhtml">
        <ui:define name="content">

            <p:toolbar>

                <p:toolbarGroup align="left">
                    
                </p:toolbarGroup>

                <p:toolbarGroup align="right">
                    <p:commandButton icon="ui-icon-help"/>    
                </p:toolbarGroup>

            </p:toolbar>
            
            
            <p:panel header="Cadastro de Departamento" toggleable="true" toggleOrientation="horizontal">
                <p:growl showDetail="true"/>
                
                <div align="center">
                    <h:outputLabel value="Os campos com ( * ) são obrigatórios"/>
                </div>
                
                <p:panelGrid columns="2">
                    
                    <!-- Falta arrumar a validação dos campos, se deixar validado, não popula os campos na hora de editar -->
                    <h:outputLabel value="* Nome: " for="nome"/>
                    <p:inputText id="nome" style="width: 150px" value="#{departamentoBean.departamento.nome}"/>
                    <h:outputLabel value="* Setor " for="set"/>
                    <p:inputText id="set" style="width: 150px" value="#{departamentoBean.departamento.setor}"/> 
                    
                </p:panelGrid>
                
                <p:commandButton value="Salvar" action="#{departamentoBean.salvar()}" ajax="false" icon="ui-icon-disk"/>
                    <separator/>
                    <p:commandButton value="Cancelar" icon="ui-icon-close"/>
            </p:panel>
            
            
            <h:form id="mensagem">
                    <p:dataTable value="#{departamentoBean.departamentos}" var="item" scrollable="true" scrollRows="100" >
                        
                        <f:facet name="header">
                            Tabela de Departamentos
                        </f:facet>
                        
                        <p:column style="width: 40px">
                            <f:facet name="header">
                                <h:outputText value="Id"/>
                            </f:facet>
                            <h:outputText value="#{item.idDepartamento}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Nome"/>
                            </f:facet>
                            <h:outputText value="#{item.nome}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Setor"/>
                            </f:facet>
                            <h:outputText value="#{item.setor}"/>
                        </p:column>
                        <p:column style="width: 60px">
                            <f:facet name="header">
                                <h:outputText value="Ação"/>
                            </f:facet>
                            
                            <!-- O apagar não está funcionando, a pagina quebra quando clica no botão. Fica transparente e em ação -->
                            <p:commandButton id="showButton" icon="ui-icon-trash" onclick="confirmation.show()" type="button">
                                
                            </p:commandButton>
                           
                            <p:commandButton icon="ui-icon-pencil" action="cadastro-departamento" ajax="false">
                                <f:setPropertyActionListener value="#{item}" target="#{departamentoBean.departamento}"/>
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                    
                    <p:confirmDialog id="confDialog" showEffect="fade" hideEffect="explode" message="Deseja realmente apagar esse departamento ? " header="ATENÇÂO"
                                     severity="alert" widgetVar="confirmation">
                        <p:commandButton id="confirm" value="Sim" update="mensagem" oncomplete="confirmation.hide()"/>
                                         
                        
                        <p:commandButton id="decline" value="Não" onclick="confirmation.hide()" type="button"/>
                </p:confirmDialog>
                </h:form>
            

        </ui:define>
    </ui:composition>
</html>

